﻿@{
    Layout = "_Layout";
}
<div id="app">
    <el-row>
        <el-col :span="24">
            <div class="grid-content bg-purple-dark">
                <el-select v-model="isActive" placeholder="状态" clearable>
                    <el-option :key="0" label="所有" value="">
                    </el-option>
                    <el-option :key="1" label="正常" v-bind:value="true">
                    </el-option>
                    <el-option :key="2" label="禁用" v-bind:value=false>
                    </el-option>
                </el-select>
                <el-input v-model="instructionName" placeholder="机构名称" style="width:250px;" clearable></el-input>
                <el-button type="primary" v-on:click="loadTable"> 搜索</el-button>
                <el-button type="primary" v-on:click="add"> 创建机构</el-button>
            </div>
        </el-col>
    </el-row>
    <hr class="line-gray" />
    <el-row>
        <div class="table-container">
            <el-table :data="tableData" style="width:100%">
                <el-table-column type="index" width="50" label="编号">

                </el-table-column>
                <el-table-column label="名称" width="230" property="name">

                </el-table-column>
                <el-table-column label="地址" width="300" property="address">

                </el-table-column>
                <el-table-column label="联系电话" width="100" property="linkPhone">

                </el-table-column>
                <el-table-column label="负责人" width="150" property="controlUserName">

                </el-table-column>
                <el-table-column label="状态" width="100" >
                    <template slot-scope="scope">
                        <span v-if="scope.row.isActive" style="color:#909399">正常</span>
                        <span v-else style="color:#F56C6C">禁用</span>
                    </template>
                </el-table-column>
                <el-table-column label="创建时间" width="230" >
                    <!--注意此处 scope-slot的使用方法-->
                    <template slot-scope="scope">
                        <i class="el-icon-time"></i>
                        <span style="margin-left: 10px">{{ scope.row.createTime }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini" v-on:click="edit(scope.$index, scope.row)">编辑</el-button>
                        <el-button size="mini" type="danger" v-on:click="deleteIns(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </el-row>
    <el-dialog :title="dialogTitle" :visible.sync="addDialogVisible" width="700px" v-on:close="resetForm" :close-on-click-modal="false">
        <el-form :model="instruction" :label-width="formLabelWidth" :rules="rules" ref="ruleForm">
            <el-row>
                <el-col :span="12">
                    <div class="grid-content bg-purple-dark">
                        <el-form-item label="名 称" prop="name">
                            <el-input v-model="instruction.name" autocomplete="off" clearable></el-input>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="grid-content bg-purple-dark">
                        <el-form-item label="地 址" prop="address">
                            <el-input v-model="instruction.address" autocomplete="off"></el-input>
                        </el-form-item>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="电 话" prop="linkPhone">
                        <el-input v-model="instruction.linkPhone" autocomplete="off"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="状 态">
                        <el-radio-group v-model="instruction.isActive">
                            <el-radio :label="true">正常</el-radio>
                            <el-radio :label="false">禁用</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <div class="grid-content bg-purple-dark">
                        <el-form-item label="负责人" >
                            <el-input v-model="instruction.controlUserName" autocomplete="off"></el-input>
                        </el-form-item>
                    </div>
                </el-col>
            </el-row>
            <el-form-item >
                <el-table ref="singleTable" border :data="tableData" highlight-current-row v-on:current-change="controlUserChange"
                          style="width:100%" max-height="400">
                    <el-table-column type="index">
                    </el-table-column>
                    <el-table-column property="userName"
                                     label="用户名">
                    </el-table-column>
                    <el-table-column property="NormalizedUserName"
                                     label="姓名">
                    </el-table-column>
                    <el-table-column property="phone"
                                     label="电话">
                    </el-table-column>
                </el-table>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button v-on:click="addDialogVisible = false">取 消</el-button>
            <el-button type="primary" v-on:click="submit('ruleForm')">确 定</el-button>
        </div>
    </el-dialog>
</div>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            isActive: '',
            instructionName: '',
            formLabelWidth: '100px',
            addDialogVisible: false,
            dialogTitle: '添加机构',
            tableData: [],
            instruction: {
                id: 0,
                name: '',
                address: '',
                linkPhone: '',
                controlUserId: '',
                controlUserName: '',
                isActive: true
            },
            users: [], // 机构用户列表
            rules: {
                name: [
                    { required: true, message: '请输入机构名称', trigger: 'blur' }
                ],
                address: [
                    { required: true, message: '请输入地址', trigger: 'blur' }
                ],
                linkPhone: [
                    { required: true, message: '请输入联系电话', trigger: 'blur' },
                    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'change' }
                ]
            }
        },
        methods:
        {
            // 主列表过滤
            search() {
                let that = this;
                that.loadTable();
            },
            add() {
                let that = this;
                that.addDialogVisible = true;
                that.instruction.id = 0;
                that.instruction.name = '';
                that.instruction.address = '';
                that.instruction.controlUserId = '';
                that.instruction.controlUserName = '';
            },
            resetForm() {
                let that = this;
                that.$refs['ruleForm'].resetFields();
            },
            // 编辑
            edit(index, row) {
                // 加载信息，填充 this.instruction对象
                let that = this;
                that.dialogTitle = "编辑机构";
                that.addDialogVisible = true;
                debugger;
                that.instruction.id = row.id;
                that.instruction.name = row.name;
                that.instruction.address = row.address;
                that.instruction.linkPhone = row.linkPhone;
                that.instruction.controlUserId = row.controlUserId;
                that.instruction.controlUserName = row.controlUserName;
                that.instruction.isActive = row.isActive;
            },
            //删除
            deleteIns(index,row) {
                debugger;
                let that = this;
                debugger;
                this.$confirm('机构将被删除, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.get(`/api/instruction/delete?id=${row.id}`)
                        .then((res) => {
                            if (res.data.code === 0) {
                                that.$message({
                                    message: res.data.msg,
                                    type: 'success'
                                });
                            }
                        })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
               
            },
            controlUserChange(val) {

                //　改变ControlUserId、ControllUserName
            },
            // 提交
            submit(formName) {
                let that = this;
                that.$refs[formName].validate((valid) => {
                    if (valid) {
                        // edit
                        if (that.instruction.id !== 0) {
                            debugger;
                            axios.post('/api/instruction/edit-submit', that.instruction)
                                .then((res) => {
                                    let data = res.data;
                                    if (data.code === 0) {
                                        that.$message({
                                            message: data.msg,
                                            type: 'success'
                                        });
                                        that.addDialogVisible = false;
                                        // 重新加载列表
                                        that.loadTable();
                                    }
                                    else {
                                        that.$message.error(data.msg);
                                    }
                                })
                                .catch((error) => {
                                    debugger;
                                });
                        }
                        else {
                            debugger;
                            axios.post('/api/instruction/add-submit', that.instruction)
                                .then(function (res) {
                                    let data = res.data;
                                    if (data.code === 0) {
                                        that.$message({
                                            message: '机构创建成功',
                                            type: 'success'
                                        });
                                        // 重新加载列表
                                        that.loadTable();
                                    }
                                    else {
                                        that.$message.error(data.msg);
                                    }
                                })
                                .catch(function (error) {
                                    console.log(error);
                                });
                        }
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });

            },
            // 加载表格数据
            loadTable() {
                let that = this;
                axios.get(`/api/instruction/get-list?isActive=${that.isActive}&instructionName=${that.instructionName}`)
                    .then((res) => {
                        that.tableData = res.data.data
                    })
                    .catch((err) => {
                        console.log(err);
                    })
            }
        },
        created() {
            this.loadTable();
        },
        mounted() {

        }
    });
</script>
<style>
</style>
